<template>
<view>
	<view class="newslist" v-for="(item,index) in list" :key="index">
		 <view class="orderNum">
			<text>订单号:{{item.orderNum}}</text>
			<text class="pay1" v-if="item.payType==1" @click="del(item.id,index)">删除</text>
		</view>
		 <view class="orderPrice">
			 <view>订单金额¥:{{item.money}}</view>
			 <view class="pay1" v-if="item.payType==1">未支付</view>
			 <view class="pay2" v-if="item.payType==2">支付成功</view>
			 <view class="pay3" v-if="item.payType==3">支付失败</view>
		 </view>
		 <view class="list">
			<view class="list_item" v-for="(iitem,iindex) in item.list" :key="iindex">
				 <view class="list_left">
					 <image v-if="iitem.img" :src="imgUrl+iitem.img"></image>
				 </view>
				 <view class="item">
					 <view class="item_line1">{{iitem.name}}</view>
					 <view class="item_line2">数量:{{iitem.num}}</view>
					 <view class="item_line3">单价:{{iitem.price}}</view>
				 </view>
			 </view>
		 </view>
		 <view class="orderfooter">
			<view class="footer_line">支付方式:
				<text v-if="item.payScore > 0">积分:{{item.payScore}}</text>
				<text v-if="item.payRed > 0">余额:{{item.payRed}}</text>
				<text v-if="item.payMoney > 0">微信:{{item.payMoney}}</text>
			</view>
			<view class="footer_line">下单时间:{{item.addtime}}</view>
			<view class="footer_line" v-if="item.logistics">{{item.logistics}}:{{item.logisticsNum}}</view>
			<view class="footer_line">~~暂无物流信息~~</view>
		 </view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return{
			imgUrl:this.url,
			list:[],
			page:1,
			pageShow:true
		}
	},
	onLoad:function(){
		uni.showLoading({
		    title: '加载中'  
		});
		this.getlist();
	},
	methods: {
		getlist:function(){
			var that = this;
			var data = {
				uid:uni.getStorageSync('uid'),
				page:this.page
			}
			request({
				url: 'order/list',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					if(res.data.code == 1){
						if(res.data.data.last_page <= that.page){
							that.pageShow = false
						}
						if(that.page == 1){
							that.list = res.data.data.data
						}else{
							var list = that.list
							that.list = list.concat(res.data.data.data)
						}
					}
				}
			})
		},
		onReachBottom: function(){
			if(this.pageShow){
				 //当前不是最后一页可加载
				 this.page = this.page + 1
				 uni.showLoading()
				 this.getlist();
			}
		},
		del:function(id,index){
			var data = {id:id}
			var that = this
			request({
				url: 'order/edit',
				method: 'put',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title: '删除成功!!!',
							icon: "success", 
							position:'bottom',
						});
						that.list.splice(index,1)
					}else{
						uni.showToast({
							title: '删除失败!!!',
							icon: "none", 
							position:'bottom',
						});
					}
				}
			})
		}
	}
}
</script>
<style>
.newslist {
    display: flex;
    flex-direction:column;
    width: 100%;
    border-bottom: 3px solid #efefef;
	padding:10rpx 10rpx 10rpx 10rpx;
}
.orderNum{
    border-bottom: 1px dashed #efefef;
	height:50rpx;
	line-height: 50rpx;
	font-weight: bold;
	font-size:17px;
	padding:10rpx 40rpx 10rpx 10rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.orderPrice{
	padding:10rpx 40rpx 10rpx 10rpx;
    display: flex;
	flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
}
.pay1{
	width:150rpx;
	height:50rpx;
	line-height:50rpx;
	border-radius: 25rpx;
	background:#B30000;
	color:#FFFFFF;
	text-align: center;
	font-size:14px;
}
.pay2{
	width:150rpx;
	height:50rpx;
	line-height:50rpx;
	border-radius: 25rpx;
	background:#00b32d;
	color:#FFFFFF;
	text-align: center;
	font-size:14px;
}
.pay3{
	width:150rpx;
	height:50rpx;
	line-height:50rpx;
	border-radius: 25rpx;
	background:#ff8000;
	color:#FFFFFF;
	text-align: center;
	font-size:14px;
}
.list{
	padding:10rpx 10rpx 10rpx 10rpx;
}
.list_item{
	display: flex;
	flex-direction: row;
	padding-bottom: 10rpx;
	border-bottom: 1rpx dashed #efefef;
}
.list_left{
	width:30%;
	text-align: center;
}
.list_left image{
	width:180rpx;
	height:180rpx;
}
.item{
	display: flex;
	flex-direction: column;
	padding-top: 10rpx;
	padding-left:10rpx;
}
.item_line1{
	font-weight: bold;
}
.item_line2{
	margin-top:15rpx;
}
.item_line3{
	margin-top:15rpx;
	color:#ff1a1a;
}
.orderfooter{
	display: flex;
	flex-direction: column;
}
.footer_line{
	height:60rpx;
	line-height: 60rpx;
}
</style>